<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { Discount } from '@element-plus/icons-vue'
import imgValue from '@/assets/svg/nav_title.svg'
import TagComtent from '@/components/TagComtent.vue'
import HeadContent from '@/components/HeadContent.vue'

const router = useRouter()
</script>

<template>
  <div class="main">
    <HeadContent title="首页"></HeadContent>
    <TagComtent></TagComtent>
    
    <div class="content">
      <TitleContent :img="imgValue" title-name="待办事项" />
      <div class="c2">2个员工请假申请，请&nbsp;<span>点击这里</span>&nbsp;进行审批</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  background-color: #eeeeee;
  
  h1 {
    font-size: 30px;
  }
  .nav {
    height: 30px;
    margin: 30px 0;
    // background-color: skyblue;
    border: 1px solid #cbcbcb;
  }
  .content {
    box-shadow: var(--el-box-shadow-light);
    // margin-left: 20px;
    height: fit-content;
    border: 1px solid #cbcbcb;
    .c1 {
      display: flex;
      align-items: center;
      height: 40px;
      background-color: #fff;
      .s1 {
        height: 100%;
        width: 40px;
        display: flex;
        align-items: center;
        font-size: 18px;
        justify-content: center;
        border-right: 1px solid #cbcbcb;
        margin-right: 10px;
      }
      .s2 {
        width: 20px;
        height: 24px;
        border-radius: 4px;
        color: #fff;
        display: flex;
        align-items: center;
        font-size: 14px;
        justify-content: center;
        align-items: center;
        font-weight: 700;
        margin-left: 10px;
        background-color: #3a87ad;
      }
    }
    .c2 {
      display: flex;
      align-items: center;
      padding-left: 10px;
      height: 40px;
      border-top: 1px solid #cbcbcb;
      span {
        cursor: pointer;
        color: #0088cc;
      }
    }
  }
}
</style>
